<template>
  <div style="height:100%" class="deptTree">
    <el-scrollbar style="height:100%" >
      <!-- :default-checked-keys="checkedDept"; disabled:'disabled' -->
      <div class="searchTree">
        <el-input
          prefix-icon="el-icon-search"
          :placeholder="$t('placeholder_dep_content')"
          size="mini"
          v-model="searchName"
          @keyup.enter.native="searchDepartment"
          >
        </el-input>
      </div>
        <!-- 部门tree -->
      <el-tree
        ref="departmentTree"
        node-key="id"
        :props="{
              label: 'name',
              children: 'zones',
              isLeaf: 'leaf',
            }"
        :load="loadNode"
        @node-click="onNodeClick"
        @check="getCheckNode"
        @check-change="changSatus"
        :default-expanded-keys="defaultExpandedKeys"
        :expand-on-click-node="false"
        lazy
        :check-strictly="true"
        v-if="isShowTree"
      >
       <span slot-scope="{ data }">
          <span :title="data.name" >{{ data.name }}</span>
        </span>
      </el-tree>
         <!-- 用户tree -->
      <!-- <el-tree
       ref="userTree"
        node-key="id"
        :props="{
              label: 'name',
              children: 'zones',
              isLeaf: 'leaf'
            }"
        :load="loadNode"
        @node-click="onNodeClick"
        :default-expanded-keys="defaultExpandedKeys"
        :expand-on-click-node="false"
        lazy
        v-if="!invalid&&isShowTree"
      >
       <span slot-scope="{ data }">
          <span :title="data.name">{{ data.name }}</span>
        </span>
      </el-tree> -->
      <!-- 搜索用户中的部门树，列表展示 -->
       <template>
          <ul v-show="!isShowTree" :data="usertableData">
        <li v-for="(elm,index) in usertableData.datas"  :key="index" @click="onNodeClick(elm)" class="userNode"><span :class="selectedItem==elm.id?'highLight':''">{{elm.name}}</span></li>
      </ul>
         </template>
    </el-scrollbar>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      defaultExpandedKeys: [],
      node:[],
      resolve:function(){},
      isFirst:true,
      checkedDept:[],
      searchName:'',
      isShowTree:true, //是否展示树形视图
      searchdata: {
        domainid: this.$route.query.domainid,
        superiorid: "",
        currpage: 1,
        pagelines: 10,
        orderby: "",
        data:{
          name: "",
          fieldExtends: {}
        }
      },
      usertableData:{},
      selectedItem:'',//当前选中的id值
    };
  },
  props:{
    invalid: Boolean,
    departments: Array,
    haveChange: Boolean,
    isUserTree: Boolean, // 用户中的树还是部门中的树
    disableRoot: Boolean, // 顶级的部门树选择框要禁用
    superiorId :{
      type:String,
      default:''
    }
  },
  computed:{
    
  },
  created(){
    if(this.departments){
      this.departments.forEach(elm=>{
        this.checkedDept.push(elm.departmentId);
      })
    }
    this.loadNode(this.node,this.resolve);
  },
   watch: {
    },
  methods: {
    //查询部门方法
    searchDepartment(){
      this.isShowTree=!this.searchName
      this.searchdata.data.name=this.searchName
      this.searchdata.pagelines=10000
      let params = {
        ...this.searchdata,
        valid:1,
        data:{
          name: this.searchdata.data.name.replace(/\%/g, '%25')
        }
      }
      if (this.invalid) {
          params.valid=''
        }
      // if(!this.invalid){
        this.$api.getSubDepartments(params, {
        onSucess: resp => {
          this.usertableData = resp.data.data;
        }
      });
      // }
    },
    changSatus(){
      this.$emit("changeStatus",true)
    },
    getCheckNode(now,all){
      this.$emit("checkAll", all.checkedNodes);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        if(this.isFirst){
          this.isFirst=false;
          this.node=node;
          this.resolve=this.resolve;
        }
        this.$api.getRootDepartment({
          onSucess: resp => {
            let rootDepartment = resp.data.data;
            if(rootDepartment){
              let have=false;
              for(let i=0;i<this.checkedDept.length;i++){
                if(rootDepartment.id==this.checkedDept[i]){
                  have=true;
                }
              }

              if(have){
                rootDepartment.disabled=true;
              }
              
              resolve([rootDepartment]);
              //加载列表
              this.defaultExpandedKeys.push(rootDepartment.id);
            }
            
          }
        });
      }
      if (node.level >= 1) {
        let valid=this.invalid && !this.isUserTree?"":1
        this.$api.getSubDepartmentNodes( node.key, {
          onSucess: resp => {
            let subdepts = resp.data.data;
            if(subdepts){
              let validDept =[];
              subdepts.forEach((elm)=>{
                let have=false;
                for(let i=0;i<this.checkedDept.length;i++){
                  if(elm.id==this.checkedDept[i]){
                    have=true;
                  }
                }
                if(have && !this.isUserTree){
                  elm.disabled=true;                  
                }
                if(elm.valid){
                  validDept.push(elm);
                }else{
                    //失效的部门应该在部门树中，失效的部门不能在用户树中展示
                    if(this.invalid){
                      validDept.push(elm)
                    }
                }
              })
           
              // if(this.invalid){
                resolve(validDept);
                
              // }else{
                // resolve(subdepts);
              // }
            }else{
              subdepts=[];
              resolve(subdepts);
            }
            this.$nextTick(()=>{
              if (this.superiorId) {
                // if (this.invalid) {
                  this.$refs.departmentTree.setCurrentKey(this.superiorId);
                // }
                // if (!this.invalid && this.isShowTree) {
                //   this.$refs.userTree.setCurrentKey(this.superiorId);
                // }
              }
            })
          }
        });
      }
    },

    onNodeClick(dept) {
      this.selectedItem=dept.id
      this.$emit("node-click", dept);
    },
  }
};
</script>

<style lang="scss" scoped>
</style>